<template>
  <a-steps :items="steps" :current="step" @change="change">
    <template #progressDot="{ prefixCls, index }">
      <span
        :class="{
          [`${prefixCls}-icon-dot`]: true,
          '!bg-primary': !!stepInfo.getStep(processCollections[index])?.data,
        }"
      ></span>
    </template>
  </a-steps>
</template>

<script setup lang="ts">
import { JobStep, processCollections } from './Step';
defineProps<{
  change: (value: number) => void;
  stepInfo: JobStep;
}>();
const steps = [
  {
    title: '选择类目',
  },
  {
    title: '匹配条件',
  },
  {
    title: '关联选项',
  },
  {
    title: '总览结果',
  },
];
const step = defineModel({ default: 0 });
</script>
